<template>
	<view>
		<form @submit="formSubmit" @reset="formReset" >
			<view class="uni-form-item uni-column">
				<input class="uni-input" name = "source" focus placeholder="请输入数据名称" />
				<input class="uni-input" name = "value" type="number" placeholder="请输入数据数值" />
				<view class="uni-form-item uni-row">
					<button type="primary" form-type="submit">新增</button>
					<button type="default" form-type="reset">删除</button>
				</view>
			</view>
		</form>
		<scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" refresher-background = "#00ff7f" >
			<text class="text" user-select = "true">{{text}}</text>
		</scroll-view>
		<view id ="container" style='height:600px;width：auto'>画图区域</view>
		<view id ="container1" style='height:600px;width：auto'>画图区域</view>
	</view>
</template>

<script>
	import * as echarts from '@/components/echarts.min.js';
	export default {
	    data() {
	        return {
	            text: '',
	            canAdd: true,
	            canRemove: false,
	            source: [],
				value: [],
				op:[],
				show: []
	        }
	    },
		mounted(){
			this.draw()
			this.draw1()
		},
	    methods: {
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			formSubmit: function(e) {
				if(e.detail.value.source.length==0||e.detail.value.value.length==0){
					console.log('请完整输入' + JSON.stringify(e.detail.value))
					uni.showModal({
					    content: '输入信息不完整',
					    showCancel: true
					});
				}
				else{
					console.log('数据发送成功，发送数据为：' + JSON.stringify(e.detail.value))
					var formd = e.detail.value
					var source = formd.source
					var value = formd.value
					this.source.push(source)
					this.value.push(value)
					this.op.push({'value':eval(value),'name':source})
					this.show.push('name'+':'+source+','+'value'+value)
					this.source1 = JSON.parse(JSON.stringify(this.source))
					this.value1 = JSON.parse(JSON.stringify(this.value))
					this.op1 = JSON.parse(JSON.stringify(this.op))
					this.text = this.show.join('\n');
					console.log(this.op1)
					console.log(this.show)
					this.draw()
					this.draw1()
					}
			},
			formReset: function(e) {
				if (this.op.length > 0) {
					this.op.pop();
					this.source.pop();
					this.value.pop();
					this.op1.pop();
					this.source1.pop();
					this.value1.pop();
					this.show.pop()
					this.text = this.show.join('\n');
					this.canAdd = this.show.length < 12;
					this.canRemove = this.show.length > 0;
					this.draw()
					this.draw1()
				}
            },
			draw: function(){
				var chartDom = document.getElementById('container');
				var myChart = echarts.init(chartDom);
				var option;
				
				option = {
					title: {
					    text: "柱状图",
					    subtext: "Bar",
					    left: "center",
					    top: "top",
					    textStyle: {
					      fontSize: 20
					    },
					    subtextStyle: {
					      fontSize: 10
					    }
					  },
					 tooltip: {
					         trigger: 'axis'
					  },
				    xAxis: {
				        type: 'category',
				        data: this.source1
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [{
				        data: this.value1,
				        type: 'bar',
				        showBackground: true,
				        backgroundStyle: {
				            color: 'rgba(180, 180, 180, 0.2)'
				        }
				    }]
				};
				
				option && myChart.setOption(option);
			},
			draw1: function() {
				var chartDom = document.getElementById('container1');
				var myChart = echarts.init(chartDom);
				var option;
				option = {
					title: {
					    text: "饼图",
					    left: "center",
					    top: "top",
					    textStyle: {
					      fontSize: 20
					    }
					  },
				    tooltip: {
				            trigger: 'axis'
				     },
				    legend: {
						data: this.source1,
				        top: '5%',
				        left: 'center'
				    },
				    series: [
				        {
				            name: 'Pie',
				            type: 'pie',
				            radius: ['40%', '70%'],
				            avoidLabelOverlap: false,
				            label: {
				                show: true,
				                position: 'top'
				            },
				            emphasis: {
				                label: {
				                    show: true,
				                    fontSize: '40',
				                    fontWeight: 'bold'
				                }
				            },
				            labelLine: {
				                show: true
				            },
				            data: this.op1
				        }
				    ]
				};
				
				option && myChart.setOption(option);
			}
		}
	}
</script>

<style scoped>
	/* 表单 */
	.uni-form-item{
		display:flex;
		width:100%;
		padding:10rpx 0;
		text-align: center;
		box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
	}
	.uni-column {
		flex-direction: column;
	}
	.uni-row {
		flex-direction: row;
	}
	.uni-input {
		height: 50rpx;
		padding: 15rpx 25rpx;
		line-height:50rpx;
		font-size:28rpx;
		background:#FFF;
		flex: 1;
		border-bottom-style:solid;
		border-color:#00ecec;
	}
	.text{
		display:flex;
		width:auto;
		text-align: left;
		height: 80px;
	}
	#container{
		padding: 15px,5px;
		display: flex;
		 flex-direction: column;
		 align-items: center;
		 justify-content: space-between;
		 box-sizing: border-box;
		 border-top-style:solid;
		 border-color:#ffff00;
	}
	#container1{
		padding: 15px,5px;
		display: flex;
		 flex-direction: column;
		 align-items: center;
		 justify-content: space-between;
		 box-sizing: border-box;
		 border-top-style:solid;
		 border-color:#ffff00;
	}
</style>